<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import PageList from '../FormItem/PageList.vue'
import { jumpTypeOptions, jumpUrlOptions, bannerTypeOptions } from '@/hooks/useBannerOptions'
import { JumpType, BannerType } from '@/enum/banner'
const props = defineProps<{
  show: boolean
  info?: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  url: '',
  params: '',
  type: 1,
  targetType: 4,
  appId: '',
  miniappurl: '',
  weburl: '',
})

const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      done(true)
      emit('update:show', false)
      emit('confirm', detail)
    } else done(false)
  })
}
onMounted(() => {
  if (props.info) {
    Object.assign(detail, props.info)
    // alert(JSON.stringify(detail))
  }
})
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" title="选择链接" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item field="targetType" label="导向类型" :rules="[{ required: true, message: '请选择导向类型' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.targetType" :options="jumpTypeOptions" placeholder="请选择跳转类型" />
        </a-form-item>

        <template v-if="detail.targetType == JumpType.跳转小程序">
          <a-form-item field="appId" label="APPID" :rules="[{ required: true, message: '请输入APPID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.appId" placeholder="请输入APPID" />
          </a-form-item>
          <a-form-item field="miniappurl" label="小程序页面" :rules="[{ required: true, message: '请输入小程序页面' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.miniappurl" placeholder="请输入小程序页面" />
          </a-form-item>
        </template>
        <template v-else-if="detail.targetType == JumpType.跳转外部链接">
          <a-form-item field="weburl" label="外部链接" :rules="[{ required: true, message: '请输入外部链接' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.weburl" placeholder="请输入外部链接" />
          </a-form-item>
        </template>
        <template v-else-if="detail.targetType == JumpType.内部链接">
          <a-form-item label="选择链接">
            <PageList v-model:val="detail.url" />
          </a-form-item>
        </template>
        <a-form-item label="携带参数" field="params">
          <a-textarea v-model="detail.params" placeholder="请输入携带参数" />
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
